<template>
  <div class="cart-botton-bar">
    <check-button
      :is-checked="isCheckAll"
      class="logo"
      @click.native="checkClick"
    />
    <div class="check-all">全选</div>
    <div class="price">共计:{{ totalPrice }}</div>
    <div class="calc">去计算({{ checkedLength }})</div>
  </div>
</template>
<script>
import CheckButton from "components/content/checkButton/CheckButton.vue";
export default {
  components: { CheckButton },
  name: "CartBottonBar",
  data() {
    return {};
  },
  computed: {
    checkedLength() {
      return this.$store.state.cartList.filter((item) => item.checked).length;
    },
    totalPrice() {
      return (
        "￥" +
        this.$store.state.cartList
          .filter((item) => {
            return item.checked;
          })
          .reduce((preValue, item) => {
            return preValue + item.price * item.count;
          }, 0)
      );
    },
    isCheckAll() {
      if (this.$store.state.cartList.length === 0) {
        return false;
      }
      return !this.$store.state.cartList.filter((item) => !item.checked).length;
    },
  },
  methods: {
    checkClick() {
      console.log("112233");

      if (this.isCheckAll) {
        this.$store.state.cartList.forEach(
          (element) => (element.checked = false)
        );
      } else {
        this.$store.state.cartList.forEach(
          (element) => (element.checked = true)
        );
      }
    },
  },
};
</script>
<style scoped>
.cart-botton-bar {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  background-color: #eee;
  display: flex;
}
.logo {
  width: 20px;
  padding-top: 4px;
  padding-left: 8px;
}

.active {
  background-color: pink;
  border: 2px solid pink;
}

.check-all {
  width: 60px;
  text-align: center;
}

.price {
  flex: 1;
  text-align: center;
}

.calc {
  width: 120px;
  height: 44px;
  text-align: center;
  color: white;
  background-color: orange;
}
</style>
